<template>
    <div class="header">商家信息</div>
    
    <div class="business-logo">
        <img :src="business.businessImg">
    </div>
    <!-- 商家信息 -->
    <div class="business-info">
        <h1>{{ business.businessName }}</h1>
        <p>&#165;{{ business.starPrice }}起送 | &#165;{{ business.deliveryPrice }}配送</p>
        <p>{{ business.businessExplain}}</p>
    </div>
     <!-- 食品列表部分 -->
    <ul class="food">
    <li v-for="(item,index) in foodArr" v-bind:key ="item.foodId" class="food-li">
        <div class="food-left">
            <img :src="item.foodImg">
            <div class="food-left-info">
                <h3>{{ item.foodName}}</h3>
                <p>{{ item.foodExplain }}</p>
                <p>&#165;{{ item.foodPrice }}</p>
            </div>
        </div>
        <div class="food-right">
            <div>
                <i class="fa fa-minus-circle" @click="minus(index)" v-show="item.quantity!=0"></i>
            </div>
           <p><span v-show="item.quantity!=0">{{ item.quantity }}</span></p>
           <div>
            <i class="fa fa-plus-circle" @click="add(index)"></i>
           </div>
        </div>
    </li>
</ul>
<!-- 购物车部分 -->
 <div class="cart">
    <div class="cart-left">
        <div class="cart-left-icon" :style="totalQuantity ==0? 'background-color:#505051;':'background-color:#3190E8;'">
        <i class="fa fa-shapping-cart"></i>
        <div class="cart-left-icon-quantity" v-show="totalQuantity!=0">共{{ totalQuantity }}份</div>
         
        </div>
        <div class="cart-left-info">
            <p>&#165;{{ totalPrice }}</p>
            <p>另需配送费{{ business.deliveryPrice }}元</p>
        </div>
    </div>
    <div class="cart-right">
        <div class="cart-right-item" v-show="totalSettle < business.starPrice" style="background-color: #535356;cursor: default; color: white;">
            &#165;{{ business.starPrice }}起送
        </div>
    <div class="cart-right-item" @click="toOrder" v-show="totalSettle>=business.starPrice">
         去结算
    </div>
    </div>
 </div>
</template>
<script>
 export default{
    name:'bussnessInfor',
    data(){
        return{
            businessId:this.$route.query.businessId,
            business:{},
            foodArr:[],
            user:{}
        }
    },
    created(){
        
        this.user = this.$getSessionStorage('user');
        console.log(this.businessId);
        this.$axios.post('BusinessController/getBusinessById',this.$qs.stringify({
            businessId :this.businessId
        })).then(response =>{
            this.business = response.data;
        }).catch(error =>{
            console.error(error);
            
        });


        this.$axios.post('FoodController/listFoodByBusinessId',this.$qs.stringify({
            businessId:this.businessId
        })).then(response =>{
            this.foodArr = response.data
            for(let i =0;i<this.foodArr.length;i++){
                this.foodArr[i].quantity = 0;
            }
            if(this.user != null){
                this.listCart();
            }
        }).catch(error =>{
            console.error(error);
        });
    },
        methods:{
            listCart(){
                this.$axios.post('CartController/ListCart',this.$qs.stringify({
                    businessId:this.businessId,
                    userId:this.user.userId
                })).then(response =>{
                    let cartArr = response.data;

                    for(let foodItem of this.foodArr){
                        foodItem.quantity = 0;
                        for(let cartItem of cartArr){
                            if(cartItem.foodId == foodItem.foodId){
                                foodItem.quantity = cartItem.quantity;
                            }
                        }
                    }
                    console.log(this.foodArr);
                    this.foodArr.sort();
                }).catch(error =>{
                    console.error(error);
                });
            },
            add(index){
                if(this.user == null){
                    this.$router.push({path:'/login'});
                    return;
                }
                if(this.foodArr[index].quantity==0){
                    this.saveCart(index);
                }else{
                    this.updateCart(index,1);
                }
            },
            minus(index){
                if(this.user ==null){
                    this.$router.push({path:'/login'});
                    return;
                }
                if(this.foodArr[index].quantity>1){
                    this.updateCart(index,-1);
                }else{
                    this.removeCart(index);
                }
            },
            saveCart(index){
                this.$axios.post('CartController/saveCart',this.$qs.stringify({
                 businessId:this.businessId,
                 userId:this.user.userId,
                 foodId:this.foodArr[index].foodId,
                })).then(response =>{
                    if(response.data ==1){
                        this.foodArr[index].quantity=1
                        this.foodArr.sort();
                    }else{
                         alert('向购物车中添加食品失败');
                    }
                }).catch(error =>{
                    console.error(error);
                });
            },
            updateCart(index,num){
                this.$axios.post('CartController/updateCart',this.$qs.stringify({
                    businessId:this.businessId,
                    userId:this.user.userId,
                    foodId:this.foodArr[index].foodId,
                    quantity:this.foodArr[index].quantity +num
                })).then(response =>{
                    if(response.data >=1){

                        this.foodArr[index].quantity +=num;
                        this.foodArr.sort();
                    }else{
                        alert('向购物车更新食品失败');
                    }
                }).catch(error =>{
                    console.error(error);
                });
            },
            removeCart(index){
                this.$axios.post('CartController/removeCart',this.$qs.stringify({
                    businessId:this.businessId,
                    userId:this.user.userId,
                    foodId:this.foodArr[index].foodId
                })).then(response =>{
                    if(response.data >=1){
                     this.foodArr[index].quantity =0;
                     this.foodArr.sort();
                    }else{
                        alert('从购物车中删除食品失败');
                    }
                }).catch(error =>{
                    console.error(error);
                });
                                 
            },
            toOrder(){
                this.$router.push({path:'/Orders',query:{businessId:this.business.businessId}});

            }

        },
        computed:{
            totalPrice(){
                let total =0;
                for(let item of this.foodArr){
                    total +=item.foodPrice*item.quantity;
                }
                return total;
            },
            totalQuantity(){
                let quantity =0;
                for(let item of this.foodArr){
                    quantity +=item.quantity;
                }
                return quantity;
            },
            totalSettle(){
                return this.totalPrice + this.business.deliveryPrice;
            }
        }
    }
 

</script>
<style>

   

.business-info{
    width: 100%;
    text-align: center;
}
.food-li{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.food-left{
     display: flex;
}
.cart{
    display: flex;
    width: 100%;
    height: 200px;
    justify-content: space-between;
}

.cart-right-item{
    width: 100%;
    height: 50px;
    font-size: 30px;
    background-color: #0097ff;
    
}


</style>